<template>
	<view>
		<!-- :style="type==3?'overflow:hidden':''" -->
		<view class="" @click="showArea=false" :style="type==3?'overflow:hidden':''">
			<view class="relative">
				<image src="/static/images/login/Ellipse 87.png" class="imageTop" mode="widthFix" v-if="type!=3">
				</image>
				<view class="fixed returnIcon" @click="$my.go('/pages/index/index')"
					:style="type==3?'background-color: #f5f5f5':''">
					<u-icon name="arrow-left" size="40rpx" color="#333" style='margin:100rpx 10rpx 10rpx;'></u-icon>
				</view>
			</view>
			<view class="textHome" v-if="type!=3">
				欢迎登录奈喜
			</view>
			<view class="bindPhone" v-else>
				绑定手机号
			</view>
			<view class="inputBox" v-if="type==2 || type==3">
				<u-input placeholder="请输入电话号码" border="none" v-model="phone">
					<view class="relative" slot="prefix" style="width: 120rpx">
						<view class="flex" @click.stop="showArea=true">
							<view class="fontS32">
								+{{area}}
							</view>
							<u-icon name="arrow-down" size="18rpx" color="#333" style='margin-left: 10rpx;'></u-icon>
						</view>
						<view class="selectbox" v-if="showArea">
							<view class="triangle">
							</view>
							<view class="box">
								<scroll-view scroll-y="true" style="min-height: 10vh;max-height: 30vh;">
									<view v-for="(item,index) in listArea" :key="index" class="lis   fontS24 elipes1"
										@click="area=item.prefix;showArea=false">
										+{{item.prefix}}
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</u-input>
				<u-input placeholder="请输入验证码" border="none" style='margin-top: 40rpx;' v-model="code">
					<view slot="prefix" style="width: 120rpx;"></view>
					<view class="" slot="suffix">
						<view class="" v-if="num>0" class="homeRed">
							{{num}}S
						</view>
						<view class="flex homeRed" style="text-decoration:underline;" @click="getCode" v-else>
							获取验证码
						</view>
					</view>
				</u-input>
			</view>
			<view class="paddingLR32">
				<u-button :loading='loading' class="btn bgcred cof fontS32" :style="{width:type!=1?'100%':'70%'}"
					@click="login">
					{{type==1?'本机号码一键登录':type==2?'登录':'确定'}}
				</u-button>
				<view class="fontS32 center" style="margin-bottom: 20%;" v-if="type==1 || type==2">
					<view class="" v-if="type==2" @click="aLlogin">
						手机号码一键登录
					</view>
					<view class="" v-if="type==1 " @click="type=2">
						验证码登录
					</view>
				</view>
			</view>
			<view class="bottomBox " v-if="type!=3">
				<view class="">
					<view class="">
						<view class="center flexRowCenter mt32 mb24 flex">
							<u-line length="120rpx" color="#ddd"> </u-line>
							<text style="color: #ccc;margin: 0 20rpx;">其他登录方式</text>
							<u-line length="120rpx" color="#ddd"></u-line>
						</view>
						<view class="flex flexRowCenter" style="margin:62rpx  0;">
							<!-- @click="aLlogin" -->
							<view class="center" @click="wxLogin">
								<image src="/static/images/login/Group 33211.png" style="width: 80rpx;height: 80rpx;">
								</image>
								<view class="">
									微信
								</view>
							</view>
							<view class="center" v-if="false">
								<image src="/static/images/login//Group 33212.png" style="width: 80rpx;height: 80rpx;">
								</image>
								<view class="">
									支付宝
								</view>
							</view>
						</view>
					</view>
					<view class="" style="margin: 100rpx auto 0px;width: 90%;">
						<view class="radio1 center" @click="isagreen=!isagreen">
								<u-icon name='checkbox-mark' color="#DD2131" size="30rpx" v-if="isagreen" ></u-icon>
						</view>
						<view class="">
							点击登录，即表示同意 <text class="co9" @click="$my.go('/pages/my/privacyAndAgreements?type=1')"
								style="text-decoration: underline;">《奈喜平台隐私协议》</text>、<text class="co9"
								style="text-decoration: underline;"
								@click="$my.go('/pages/my/privacyAndAgreements?type=6')">《电商平台服务协议》</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isagreen:false,//是否同意协议
				weixinCode: '', //微信登录后 绑定手机号需要给接口传code
				isApp: false,
				// authUiConfig:{
				// setLogoUi: {
				// 	            imgPath: "static/logo.png",
				// 	            x: "100",
				// 	            y: "30",
				// 	            width: "30",
				// 	            height: "60"
				// 	        },
				// },
				loading: false,
				num: 0,
				listArea: [{
					prefix: '1'
				}, {
					prefix: '86'
				}],
				showArea: false,
				phone: '', //手机号   13882597593
				code: '', //验证码  123456
				area: '86', //区号 
				type: 1, //1是本机号码一建登录  2是验证码登录  3是绑定手机号码
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.type = 1;
			this.isApp = true;
			const aLiSDKModule = uni.requireNativePlugin('AliCloud-NirvanaPns')
			aLiSDKModule.checkEnvAvailable(2, result => {
				console.log(result.resultCode)
				// 检查类型：1 为检查号码认证环境，2 为检查一键登录环境
				if (result.resultCode == 600000) {
					// 600000表示接口调用成功，环境支持一键登录/本机号码校验，具体更多code可以参照下面的sdk返回码
				}
			})
			// #endif  
			this.$my.post('/index/com/get_phone_prefix').then(res => {
				if (res.code == 200) {
					this.listArea = res.data
				}
			})
		},
		methods: {
			// 微信登录
			wxLogin() {
				let _this = this
				if(!this.isagreen){
					this.$my.toast('请同意勾选协议')
					return
				}
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						console.log(event.code)
						// return
						_this.$my.post('/index/login/oauth_by_wechat', {
							code: event.code
						}).then(res => {
							console.log(res)
							if (res.code == 200) {
								if (res.data.is_bind_phone == 0) {
									_this.type = 3 //绑定手机号
									_this.weixinCode = res.data.code
								} else {
									uni.setStorageSync('token', res.data.token);
									_this.$my.go('/pages/index/index');
								}
							} else {
								_this.$my.toast(res.message)
							}
						})
					},
					fail: function(err) {
						console.log(err.code)
						_this.$my.toast(err.code + ',登录授权失败')
						// 登录授权失败  
						// err.code是错误码
					}
				})
			},
			// app一键登录
			aLlogin() {
				if(this.isagreen){
					let _this = this
					const aLiSDKModule = uni.requireNativePlugin('AliCloud-NirvanaPns')
					aLiSDKModule.setAuthSDKInfo(
						"4JHQmwGVXCdTQybbBpWyfd5DNgJzZQAPwSrmON2WJu0I8WAsFVtXyKAo9yLLTETNv6i6QufiZwcCCDrGPuKn+AT5mhJhRWLsmpMhpg32k3YMQNt0yHo4d3difusZZ6hOzJHqNK3yZ19W7W6dch/ZmqhhlI+W3JETASnnxvGyCULJrgnHrruRV8BW25/2wbe12e0ekWqUJO+a/rVufMxtvbJMOfSHFxa9BDNLSEVDe6iJS59UZ+iZabNrFwHVkcZe81APwWSE9sMS/D5MJc6xPG/qvA9yJASjL2W4vBHatWsbxxbIB4mnMQ=="
					)
					// return 
					// 加速调用
					aLiSDKModule.accelerateLoginPage(5000, result => {
						if ("600000" == result.resultCode) {
							console.log("加速成功", result)
						}
					})
					aLiSDKModule.getLoginToken(
						5000,
						this.authUiConfig,
						tokenResult => {
							console.log('888888888888888888888888888888888888')
							if ("600001" == tokenResult.resultCode) {
								console.log("授权页拉起成功")
							} else if ("600000" == tokenResult.resultCode) {
								aLiSDKModule.quitLoginPage()
								console.log(tokenResult, "获取Token成功，接下来拿着结果里面的Token去服务端换取手机号码，SDK服务到此结束")
								_this.$my.post('/index/login/login', {
									token: tokenResult.token,
									one_click_login: 1
								}).then(res => {
									console.log(res)
									//手动关闭授权页
									aLiSDKModule.quitLoginPage()
									if (res.code == 200) {
										uni.setStorageSync('token', res.data.token);
										_this.$my.go('/pages/index/index');
									} else {
										_this.$my.toast(res.message)
									}
								})
							} else {
								_this.$my.toast(tokenResult.msg)
								//其他失败情况，手动关闭授权页
								// aLiSDKModule.quitLoginPage() 
								console.log(tokenResult, 777777777777)
							}
						},
						clickResult => {
							console.log(1111111111111111222222222222222222)
							switch (clickResult.resultCode) {
								case "700000":
									console.log("用户点击返回按钮")
									break
								case "700001":
									console.log("用户切换其他登录方式")
									break
								case "700002":
									console.log("用户点击登录按钮")
									break
								case "700003":
									console.log("用户点击checkBox")
									break
								case "700004":
									console.log("用户点击协议")
									break
							}
						},
						customUiResult => {
							console.log(11111111111111111111)
							//这里回调的是自定义控件的单击事件，通过customUiResult.widgetId来识别自定义控件，然后做一些自己的处理
						}
					)
				}else{
					this.$my.toast('请同意勾选协议')
				}
				
			},
			// 确认登录按钮
			login() {
				// 3绑定手机号   2验证码输入
				if(!this.isagreen){
					this.$my.toast('请同意勾选协议')
					return
				}
				if (this.type == 2 || this.type == 3) {
					if (!this.phone || !this.code) {
						this.$my.toast('请先完成表单')
						return
					};
					if (!/^1[3-9]\d{9}$/.test(this.phone)) {
						this.$my.toast('手机格式有误')
						return
					};
					// 是验证码登录 
					this.loading = true;
					console.log({
						phone: this.phone,
						phone_code: this.code,
						one_click_login: 0,
						code: this.weixinCode, //微信登录code
					})
					this.$my.post('/index/login/login', {
						phone: this.phone,
						phone_code: this.code,
						one_click_login: 0,
						code: this.weixinCode, //微信登录code
					}).then(res => {
						this.$my.toast(res.message);
						this.loading = false;
						if (res.code == 200) {
							uni.setStorageSync('token', res.data.token);
							this.$my.go('/pages/index/index');
						}
					})
					// 手机号码一登录
				} else if (this.type == 1) {
					this.aLlogin()
				}

			},
			// 获取验证码
			getCode() {
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					this.$my.toast('手机格式有误')
				} else {
					this.$my.post('/index/login/sms', {
						phone: this.phone,
						phone_prefix: this.area
					}).then(res => {
						this.$my.toast(res.message)
						if (res.code == 200) {
							this.num = 60
							let Timer = setInterval(() => {
								this.num--
								if (this.num == 0) {
									clearInterval(Timer)
								}
							}, 1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.returnIcon {
		top: 0rpx;
		left: 0rpx;
		z-index: 99;
		width: 100%;
		padding-top: 24rpx;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	.selectbox {
		position: relative;
		width: 150rpx;
		z-index: 999;

		.lis {
			display: flex;
			justify-content: center;
			height: 88rpx;
			line-height: 88rpx;
			border-bottom: 1px solid rgba(129, 129, 129, 0.1216);
		}

		.triangle {
			width: 36rpx;
			height: 36rpx;
			background-color: #fff;
			left: 50%;
			transform: translateX(-50%) rotate(50deg);
			text-align: center;
			position: absolute;
			top: 20rpx;
			z-index: 99;
		}

		.box {
			padding: 0 24rpx;
			box-sizing: border-box;
			position: absolute;
			width: 100%;
			min-height: 10vh;
			max-height: 40vh;
			background-color: #fff;
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1000);
			top: 35rpx;
			left: 0;
		}
	}

	.bindPhone {
		text-align: center;
		font-size: 48rpx;
		font-weight: 900;
		margin-top: 200rpx;
		margin-left: 32rpx;
	}

	.inputBox {
		// flex: 1;
		padding: 0 56rpx;
		box-sizing: border-box;
		margin-top: 120rpx;
		margin-bottom: 190rpx;
	}

	.agreen {
		color: #ccc;
		padding-bottom: 40rpx;
	}

	.bottomBox {
		.radio1{
			width:30rpx;
			height:30rpx;
			padding-top:-10rpx;
			box-sizing: border-box;
			// line-height: 30rpx;
			// text-align: center;
			border: 4rpx solid #999999;
			border-radius: 50%; 
			margin-top: 5rpx;
			margin-right: 24rpx;
			float: left;
		}
		// width: 100%;
		// position: fixed;
		// left: 50%;
		// transform:translateX(-50%);
		// bottom: 0;
	}

	.btn {
		// width: 70%;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 30% auto 84rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.textHome {
		text-align: center;
		font-size: 56rpx;
		font-weight: 900;
		margin-top: -200rpx;
	}

	.imageTop {
		width: 100%;
		// height: 400rpx; 
		margin-top: -45%;
		margin-left: -30%;
	}
</style>
